import React from 'react';
import { Card, Row, Col, Statistic, Tooltip, List } from 'antd';
import _ from 'lodash';

const GroupMonitoring = props => {
  const { topData } = props;
  const grid = {
    gutter: 10,
    xs: 1,
    sm: 2,
    md: 3,
    lg: 3,
    xl: 6,
    xxl: 6,
  };
  return (
    <List
      className="index-top"
      grid={grid}
      dataSource={topData}
      loading={topData.length <= 0}
      renderItem={item => (
        <List.Item>
          <Card>
            <Row gutter={[0, 10]}>
              <Col>
                <Row type="flex" justify="center" align="middle">
                  <Col>
                    <Tooltip placement="topLeft" title={item.value.toFixed(item.precision)}>
                      <div className="ellipsis">
                        <Statistic
                          className="font-size22"
                          title={item.title}
                          value={item.value.toFixed(item.precision)}
                        />
                      </div>
                    </Tooltip>
                  </Col>
                </Row>
              </Col>
              <Col>
                {item.content && !_.isEmpty(item.content)
                  ? item.content.map(e => (
                      <Row type="flex" justify="space-between" key={e.title}>
                        <Col>{e.title}</Col>
                        <Col>
                          <Tooltip placement="topLeft" title={e.value.toFixed(e.precision1)}>
                            <div className="ellipsis">
                              <Statistic value={e.value.toFixed(e.precision1)} suffix={e.suffix} />
                            </div>
                          </Tooltip>
                        </Col>
                      </Row>
                    ))
                  : null}
              </Col>
            </Row>
          </Card>
        </List.Item>
      )}
    />
  );
};

export default GroupMonitoring;
